BinAST
or
Brisons le mur du chargement JS !
David Teller (Yoric), Mozilla, Tech Lead
Un projet
- Mozilla
- Facebook
- Bloomberg
- CloudFlare
Sur le web, la vitesse compte
- DoubleClick : sur mobile, si le chargmenet dure 3+ secondes, 53% des visites sont abandonnées
- Addy Osmani : en médiane, le TTI dure 8 secondes sur fixe, 16 secondes sur mobile
Quel est le problème?
- Du code.
- Beaucoup de code.
- Et vous, vous avez combien de code ?
- Le code vous ralentit.
- … même si vous ne l’utilisez pas !
Parsing
![]()
On met du code…
![]()
En optimisant…
![]()
Et le code natif ?
![]()
Parlons de BinAST
- JavaScript
- Binary
- Abstract
- Syntax
- Tree
Parsons plus vite
Au-delà de IIFE
Le parseur est lent…
- Les Tokens, c’est compliqué.
- Les Chaînes de caractères, c’est compliqué.
- Les clôtures, c’est compliqué.
eval.
SyntaxError.
Du coup…
- Simplifions les Tokens et les Chaînes.
- Gérons
eval, SyntaxError, les clôtures en amont.
Résultat
- Parser + analyse statique: durée -30%.
- C’est pas fini :)
Téléchargeons plus vite
Au-delà de la minification
- Les chaînes, les noms… se répètent.
- Des répétitions entre bibliothèques.
- Le code a des motifs !
Du coup, apprenons…
- Dictionnaires de chaînes, noms…
- Dictionnaires de code.
- Un dictionnaire par site web.
- => ~1.2 bits/nœud.
- => ~2-6 bits/chaîne, nom…
Résultat
- Avec un bon dictionnaire, ~minification + brotli.
- Sans minification.
- C’est pas fini :)
…du coup
- …ne {parsons, compilons} que ce dont nous avons besoin.
- …{parsons, compilons, exécutons} avant d’avoir reçu tout le fichier.
- Oui, nous parlons bien de streaming de JavaScript.
Résultats (labo)
- Parser: durée -75% (*).
- Compiler: ~se fait en parallèle (*).
(*) À confirmer.
Résultats
- Le démarrage du JavaScript est un goulot d’étranglement.
- Nous pouvons le résoudre !
- Sans changer le code.
- Sans changer le langage.
- Moins de travail pour l’ordinateur !
Montrez-moi le code !
- WIP.
- https://github.com/binast
- Firefox Nightly (caché derrière une préférence)
- Slides: https://yoric.github.io/Numendo-2019
- Bientôt sur un navigateur & et un serveur près de chez vous :)
Contributeurs bienvenus !
- https://github.com/binast
Comment JavaScript démarre